<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
   <div class="parent">
       <div class="child">
           <button>
                按钮
           </button>
        </div>
   </div>

    <script type="text/javascript">
        var btn = document.querySelector("button");
        var child = document.querySelector(".child");
        var parent = document.querySelector(".parent");
        var body = document.querySelector("body");
        var html = document.querySelector("html");

        //冒泡
/*         btn.addEventListener("click",function(){
            console.log("btn listen");
        },false);
        
        child.addEventListener("click", function () {
                console.log("child listen");
            }, false);
            
        parent.addEventListener("click", function () {
           console.log("parent listen");
                }, false)      
        body.addEventListener("click", function () {
           console.log("body listen");
         }, false);
        html.addEventListener("click", function () {
                      console.log("html listen");
          }, false); */

                    //捕获
          	    btn.addEventListener("click", function (event) {
                    console.log("btn listen")
                }, true)
                child.addEventListener("click", function (event) {
                    console.log("child listen")
                 }, true)
                parent.addEventListener("click", function () {
                    console.log("parent listen")
                }, true)
                body.addEventListener("click", function () {
                    console.log("body listen")
                }, true)
                html.addEventListener("click", function () {
                    console.log("html listen")
                }, true)
    </script>
</body>

</html>